<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :on-change="change"
      :auto-upload="false"
      name="img"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
    <!-- :headers="{ token: localStorage.getItem('token') }" -->
    <el-dialog v-model="show" title="二维码">
      <img :src="imgUrl" alt="" />
    </el-dialog>
    <button @click="showCode">显示二维码</button>

    <editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
    <div v-html="tinymceHtml"></div>
  </div>
</template>
<script setup>
import api from "../api/index";
import axios from "axios";
import { ref } from "vue";
import tinymce from "tinymce/tinymce";
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue"; // 引入组件

import "tinymce/icons/default";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";

const init = {
  //初始化数据
  language_url: "/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
  language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
  skin_url: "/skins/ui/oxide", // 这里引入的样式
  height: 300, // 限制高度
  plugins: "link lists image code table wordcount", // 富文本插件
  toolbar:
    "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
  branding: false, // //是否禁用“Powered by TinyMCE”
  menubar: true, //顶部菜单栏显示
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  content_css: "/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  images_upload_handler: (blobInfo) =>
    new Promise((resolve, reject) => {
      // console.log(blobInfo.blob());
      // // 上传图片需要，FormData 格式的文件；
      const formDataUp = new FormData();
      // img  是接口需要的上传的属性名，一般属性名是 file
      formDataUp.append("img", blobInfo.blob());
      // // console.log(formDataUp);
      axios
        .post("http://8.141.145.150:3000/upload/upimgs", formDataUp)
        .then((res) => {
          resolve("http://8.141.145.150:3000" + res.data.data.url);
          // console.log(res);
        });
    }),
};
//  以上是富文本

import { Plus } from "@element-plus/icons-vue";
import Qrcode from "qrcode";
const imageUrl = ref("");
const show = ref(false);
const imgUrl = ref("");
const handleAvatarSuccess = (val) => {
  imageUrl.value = "http://8.141.145.150:3000" + val.data.url;
};
const change = (val) => {
  console.log(val);
  let upFile = new FormData();
  upFile.append("img", val.raw);
  api.post("http://8.141.145.150:3000/upload/upimgs", upFile).then((res) => {
    console.log(res);
  });
};

const showCode = () => {
  // 显示二维码
  show.value = true;
  Qrcode.toDataURL(
    "https://img2.baidu.com/it/u=1219035232,2414773368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=753",
    {
      quality: 3,
      margin: 5,
      color: {
        dark: "#010599FF",
        light: "#FFBF60FF",
      },
    },
    (err, url) => {
      imgUrl.value = url;
    }
  );
};

const tinymceHtml = ref("");
</script>
<style lang="scss">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
